<template>
    <div class="building-detail">
        <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 20px;">
            <el-breadcrumb-item :to="{ path: '/dormitory/baseinfo/dormitory-park' }">园区</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/dormitory/baseinfo/dormitory-building' }">宿舍楼</el-breadcrumb-item>
            <el-breadcrumb-item>宿舍楼详情</el-breadcrumb-item>
        </el-breadcrumb>

        <div style="display: flex; align-items: center;">
            <el-descriptions title="宿舍楼详情信息" direction="vertical" :column="4" border size="medium" style="width: 80%;">
                <el-descriptions-item label="宿舍楼">{{ buildingInfo.name }}</el-descriptions-item>
                <el-descriptions-item label="所属园区">{{ buildingInfo.parkName | filterParkName }}</el-descriptions-item>
                <el-descriptions-item label="负责人">{{ buildingInfo.manager }}</el-descriptions-item>
                <el-descriptions-item label="联系电话">{{ buildingInfo.managerPhone }}</el-descriptions-item>
                <el-descriptions-item label="单元数量">{{ buildingInfo.unitNumber }}</el-descriptions-item>
                <el-descriptions-item label="楼层数量（层）">{{ buildingInfo.floorNumber }}</el-descriptions-item>
                <el-descriptions-item label="住宿性别">{{ buildingInfo.gender }}</el-descriptions-item>
                <el-descriptions-item label="创建时间">{{ buildingInfo.createTime }}</el-descriptions-item>
            </el-descriptions>
            <el-image style="width: 200px; height: 200px; margin-left: 100px; border-radius: 5px;"
                :src="'http://localhost:8080/dev-api' + buildingInfo.image" fit="cover"></el-image>
        </div>

        <el-row :gutter="10" class="mb8" style="margin-top: 20px;">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                    v-hasPermi="['system:dormitory:add']">新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
                    v-hasPermi="['system:dormitory:remove']">删除</el-button>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="4" v-for="(o, index) in dormitoryList" :key="o.id" style="margin: 20px 20px 20px 0" @click="toDetail(o.id)">
                <el-card :body-style="{ padding: '0px', position: 'relative', cursor: 'pointer' }" shadow="hover">
                    <el-image class="image" src="" fit="contain"></el-image>
                    <div style="padding: 14px">
                        <span>宿舍号：{{ o.roomNo }}</span>
                        <div class="bottom clearfix">
                            <time class="time">宿舍楼：{{ o.buildingName }}</time>
                            <el-button type="text" class="button"><el-dropdown @command="handleCommand"
                                    :hide-on-click="false">
                                    <i class="el-icon-more"></i>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item icon="el-icon-edit" :command="o">修改</el-dropdown-item>
                                        <el-dropdown-item icon="el-icon-delete" :command="o.id">删除</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </el-button>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { listBuilding, getBuilding, delBuilding, addBuilding, updateBuilding } from "@/api/dormitory/basedata/building";
import {
    listDormitory,
    getDormitory,
    delDormitory,
    addDormitory,
    updateDormitory,
} from "@/api/dormitory/basedata/dormitory";

export default {
    name: 'SRSUiBuildingDetailView',

    data() {
        return {
            buildingInfo: {},
            // 宿舍列表
            dormitoryList: [],
            // 总条数
            total: 0,
            // 遮罩层
            loading: true,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                unitId: null,
                floorId: null,
                roomNo: null,
                bedNum: null,
                occupancy: null,
                status: null,
            },
        };
    },

    created() {
        this.getBuilding()
        this.getList()
    },

    methods: {
        // 获取宿舍楼详情
        getBuilding() {
            getBuilding(this.$route.query.buildingId).then(res => {
                console.log(res);
                this.buildingInfo = res.data
            })
        },
        /** 查询宿舍信息列表 */
        getList() {
            this.loading = true;
            listDormitory(this.queryParams).then((response) => {
                this.dormitoryList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
    },
    filters: {
        filteBuilding(value) {
            if (!value) return
            return `${value.length}栋`
        },
        filterParkName(value) {
            if (value == 'default') return "默认园区"
            return value
        }
    }
};
</script>

<style lang="scss" scoped>
.building-detail {
    padding: 20px;
}

.time {
    font-size: 13px;
    color: #999;

}

.bottom {
    margin-top: 13px;
    line-height: 12px;
}

.button {
    padding: 0;
    float: right;
}

.image {
    width: 100%;
    height: 150px;
    display: block;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both;
}
</style>